<template>
  <div class="m-b-10px">
    <Divider v-if="showHeaderTitle" plain orientation="left" :style="{margin: '5px 0px !important', fontSize: '13px !important'}">数据字段映射</Divider>
    <table class="mapping-setting-table">
      <thead>
      <tr>
        <th>字段</th>
        <th>映射</th>
      </tr>
      </thead>
      <tbody>
      <tr v-for="(resultObjTemplateItem, index) in resultObjTemplateData" :key="index">
        <td style="width: 100px; text-align: center;"><strong>{{resultObjTemplateItem.field}}</strong></td>
        <td><Input size="small" v-model="resultObjTemplateItem.mappingField" placeholder="请填写映射名称"/></td>
      </tr>
      <tr>
        <td colspan="2">
          <div class="float-right">
            <Button size="small" type="text" @click="updateResultObjTemplate">保存生效</Button>
          </div>
        </td>
      </tr>
      </tbody>
    </table>
  </div>
</template>

<script>

import {createHelpers} from 'vuex-map-fields';

const {mapFields} = createHelpers({
  getterType: 'designer/getLayoutItem',
  mutationType: 'designer/updateLayoutItem',
});

export default {
  name: "DsResultObjMappingSetting",
  props: {
    // 是否显示内置标题
    showHeaderTitle: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      resultObjTemplateData: []
    }
  },
  mounted() {
    this.resultObjTemplateData = this.$PnUtil.deepClone(this.ds_resultObjTemplate)
  },
  methods: {
    updateResultObjTemplate () {
      this.$store.commit('designer/updateLayoutItem', {
        path: 'component.compConfigData.ds_resultObjTemplate',
        value: this.$PnUtil.deepClone(this.resultObjTemplateData)
      });
      this.$Message.success('配置已生效')
      this.$emit('updateSuccess')
    },
  },
  computed: {
    ...mapFields({

      ds_resultObjTemplate: 'component.compConfigData.ds_resultObjTemplate'

    }),
  },
  watch: {}
}
</script>

<style scoped>
table.mapping-setting-table {
  width: 100%;
  font-size: 11px;
  color: #333333;
  border-width: 1px;
  border-color: #666666;
  border-collapse: collapse;
}

table.mapping-setting-table th {
  border-width: 1px;
  padding: 5px;
  border-style: solid;
  border-color: #757575;
  background-color: #363636;
  color: #fafafa;
}

table.mapping-setting-table td {
  border-width: 1px;
  padding: 5px;
  border-style: solid;
  border-color: #757575;
  background-color: #424242;
  color: #fafafa;
}
</style>
